<script>
import Vue from 'vue';
Vue.directive('my-bold', {
  inserted: function (el) {
    el.style.fontWeight = 900;
    el.style.fontSize = '100px';
  }
})
export default {
  props: ['onClick', 'isShow'],

  data () {
    return {
      test: 123
    };
  },

  methods: {
    afterLeave() {
      console.log('afterLeave');
    }
  },

  render() {
    /* eslint-disable object-curly-spacing */
    const directives = [
      { name: 'my-bold', value: 666, modifiers: { abc: true } }
    ];

    return (
      <transition onAfterLeave={ this.afterLeave } name='fade'>
        <div class='test' v-show={ this.isShow } v-my-bold>
          { this.test }<br/>
          { this.isShow + '' }<br/>
          { directives }
        </div>
      </transition>
    )
  }
}
</script>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}
</style>
